<template>
  <view class="unusual-info">
    <view class="item item_unusual-info">
      <view class="i-item">
        <view class="item-title">订单信息</view>
      </view>
      <view class="i-item sn">
        <view class="l-i-item">
          <view>订单编号</view>
          <view class="l-sn">{{ black_Get(unusualInfo,'sn') }}</view>
        </view>
        <text class="r-i-item" style="color: #DB187C;"
          @click="copyText(black_Get(unusualInfo,'sn'))">复制</text>
      </view>
      <view class="i-item">
        <text>商品数量</text>
        <text>{{ black_Get(unusualInfo,'approvalSubCancelPurchanse.purchanse.goodsItemsQuantity','0') }}件</text>
      </view>
      <view class="i-item">
        <text>订单金额</text>
        <text>{{ black_Get(unusualInfo,'approvalSubCancelPurchanse.purchanse.isNewDistributor') === 1? (black_Get(unusualInfo,'approvalSubCancelPurchanse.purchanse.amount','0') + black_Get(unusualInfo,'approvalSubCancelPurchanse.purchanse.goodsItemsQuantity','0')* 35) : black_Get(unusualInfo,'approvalSubCancelPurchanse.purchanse.amount','0') }}元</text>
      </view>
      <view class="i-item">
        <text>业绩积分</text>
        <text>{{ black_Get(unusualInfo,'approvalSubCancelPurchanse.purchanse.integralAchieveGive','0') }}积分</text>
      </view>
      <view class="i-item">
        <text>订单时间</text>
        <text>{{ black_Get(unusualInfo,'createTime') }}</text>
      </view>
      <view class="i-item">
        <text>业绩时间</text>
        <text>{{ black_Get(unusualInfo,'approvalSubCancelPurchanse.purchanse.achieveTime') }}</text>
      </view>
      <view class="i-item">
        <text>业绩店主</text>
        <text>{{ black_Get(unusualInfo,'approvalSubCancelPurchanse.purchanse.achieveDistributor.nickname') }}</text>
      </view>
      <view class="i-item">
        <text>订单状态</text>
        <text style="color: #DB187C;">{{ black_Get(unusualInfo,'status') | unusualStatusFilter }}</text>
      </view>
    </view>

    <view class="item item_goods-info">
      <view class="header" @click="isHasStockOutShow = !isHasStockOutShow;">
        <view class="item-header-title">
          <text>出库商品</text>
          <text>{{ quantityHasStockOutSum }}件</text>
        </view>
        <icon class="iconfont">{{ isHasStockOutShow ? '&#xe62b;' : '&#xe62c;' }}</icon>
      </view>
      <view class="content" v-show="isHasStockOutShow">
        <view class="c-item" v-for="(item,i) in goodsList" :key="i" @tap="onOpenPopup(item)">
          <text>{{ item.goods.name }}</text>
          <text>{{ item.pgiQuantityHasStockOut }}件</text>
        </view>
      </view>
    </view>

    <view class="item item_goods-info">
      <view class="header" @click="isNoStockOutShow = !isNoStockOutShow">
        <view class="item-header-title">
          <text>未出库商品</text>
          <text>{{ quantityUnStockOutSum }}件</text>
        </view>
        <icon class="iconfont">{{ isNoStockOutShow ? '&#xe62b;' : '&#xe62c;' }}</icon>
      </view>
      <view class="content" v-show="isNoStockOutShow">
        <view class="c-item" v-for="(item,i) in goodsList" :key="i" @tap="onOpenPopup(item)">
          <text>{{ item.goods.name }}</text>
          <text>{{ item.pgiQuantity - item.pgiQuantityHasStockOut }}件</text>
        </view>
      </view>
    </view>

    <van-popup
      :show="popup.show"
      round
      position="bottom"
      custom-style="height: 75%"
      @close="popup.show = false"
      class="popup"
    >
      <view class="p-header">
        <view class="title">
          <text>{{ popup.selectItem.goods.name }}</text>
          <van-icon name="cross" @tap="popup.show = false" />
        </view>
        <view class="table table_header">
          <view class="t-col">颜色</view>
          <view class="t-col">码数</view>
          <view class="t-col">数量</view>
          <view class="t-col">单价</view>
          <view class="t-col">金额</view>
          <view class="t-col">积分</view>
        </view>
      </view>
      <view class="p-body">
        <view class="table table_row" v-for="(item,i) in popup.selectItem.pgiList" :key="i">
          <view class="t-col">{{ item.goodsItems.specJson | colorFilter }}</view>
          <view class="t-col">{{ item.goodsItems.specJson | sizeFilter }}</view>
          <view class="t-col">{{ item.quantity }}</view>
          <view class="t-col">{{ item.goodsItems.amountCost + item.goodsItems.amountCostAbove }}</view>
          <view class="t-col">
            {{ (item.quantity*(item.goodsItems.amountCost+item.goodsItems.amountCostAbove)).toFixed(2) }}
          </view>
          <view
            class="t-col"
          >{{ (item.goodsItems.integralGiveDividend / item.goodsItems.integralGiveDivisor * item.quantity).toFixed(2) }}</view>
        </view>
      </view>
    </van-popup>

    <a-empty v-if="!unusualInfo" :src="'empty/order.png'|prefixOssUrl" :tips="['暂无相关订单']"></a-empty>
    <a-logo type="text"></a-logo>
  </view>
</template>

<script>
import { model } from '@/model';

const { Approval } = model.collection;

var _ = require('lodash');
export default {
  data () {
    return {
      unusualInfo: {},
      purchanseGoodsItemsList: [],
      hasStockOutSum: 0,
      noStockOutSum: 0,
      isHasStockOutShow: false,
      isNoStockOutShow: false,
      popup: {
        title: '',
        selectItem: {},
        show: false
      }
    }
  },
  onLoad (options) {
    const type = Number(options.cancelType)
    this.getUnusualInfo(options.id);
    this.setNavigationBarTitle(type);
  },
  filters: {
    unusualStatusFilter (v) {
      if (v === 1) return '待审批';
      if (v === 2) return '已通过';
      if (v === 3) return '未通过';
      if (v === 4) return '取消';
    },
    sizeFilter (v) {
      return JSON.parse(v).find(i => i.key === '尺码').value;
    },
    colorFilter (v) {
      return JSON.parse(v).find(i => i.key === '颜色').value;
    }
  },
  computed: {
    quantityHasStockOutSum () {
      if (this.purchanseGoodsItemsList) {
        return this.purchanseGoodsItemsList.reduce((p, c) => p += c.quantityHasStockOut, 0);
      }
      return 0;
    },
    quantityUnStockOutSum () {
      if (this.purchanseGoodsItemsList) {
        return this.purchanseGoodsItemsList.reduce((p, c) => p += (c.quantity - c.quantityHasStockOut), 0);
      }
      return 0;
    },
    goodsList () {
      let l = [];
      const purchanseGoodsItemsList = _.get(this, 'purchanseGoodsItemsList', []);
      purchanseGoodsItemsList.forEach(i => {
        let tar = _.find(l, x => {
          return _.get(x.goods, 'goodsId') === _.get(i, 'goodsItems.goodsId') && _.get(i,
            'goodsItems.goodsId')
        });
        if (tar) {
          tar.pgiList.push(i);
          tar.pgiQuantity += _.get(i, 'quantity');
          tar.pgiQuantityHasStockOut += _.get(i, 'quantityHasStockOut');
        } else {
          l.push({
            goods: _.get(i, 'goodsItems'),
            pgiList: [i],
            pgiQuantity: _.get(i, 'quantity'),
            pgiQuantityHasStockOut: _.get(i, 'quantityHasStockOut')
          })
        }
      })
      return l;
    }
  },
  methods: {
    getUnusualInfo (id) {
      Approval.sendApi('info', { params: {}, data: { query: { id } } }).then(res => {
        const { status, data } = res;
        if (status) {
          if (data) {
            this.unusualInfo = data;
            this.purchanseGoodsItemsList = data.approvalSubCancelPurchanse.purchanse.purchanseGoodsItemsList;
          }
        }
      })
    },
    onOpenPopup (item) {
      this.popup.selectItem = item;
      this.popup.show = true;
    },
    setNavigationBarTitle (type) {
      if (type === 1) {
        this.setNavTitle('异常订单详情')
      } else {
        this.setNavTitle('废弃订单详情')
      }
    }
  }
};
</script>

<style lang="less">
page {
  background-color: #f7f7f7;

  .unusual-info {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    .popup {
      .p-header {
        position: fixed;
        width: 100%;
        background-color: #fff;
        border-top-left-radius: 30rpx;
        border-top-right-radius: 30rpx;

        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 20rpx;
          font-size: 32rpx;
          font-weight: bold;
          text-align: left;
        }

        .table_header {
          display: flex;
          justify-content: space-around;
          padding: 20rpx 0;
          font-size: 30rpx;
          color: #333;
          border-bottom: 1rpx solid #ccc;
        }
      }

      .p-body {
        padding-top: 180rpx;

        .table_row {     
          display: flex;
          justify-content: space-around;
          padding: 20rpx 0;
          font-size: 30rpx;
          color: #666;
        }
      }
    }

    .item {
      width: 660rpx;
      padding: 20rpx;
      margin-top: 30rpx;
      background: #fff;
      border-radius: 20rpx;

      &_unusual-info {
        .i-item {
          margin-bottom: 35rpx;
          font-size: 29rpx;
          color: #666;

          .l-i-item {
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .l-sn {
              width: 433rpx;
              margin-left: 30rpx;
              text-overflow: ellipsis;
              white-space: nowrap;
              overflow: hidden;
            }
          }

          text:nth-child(2) {
            margin-left: 30rpx;
          }

          .item-title {
            border-left: 8rpx solid #d61e85;
            padding-left: 10rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: #000 ;
          }
        }

        .sn {
          display: flex;
          justify-content: space-between;
        }
      }

      &_goods-info {
        .header {
          display: flex;
          justify-content: space-between;
          height: 43rpx;
          margin-bottom: 20rpx;

          .item-header-title {
            padding-left: 10rpx;
            font-size: 30rpx;
            font-weight: bold;
            border-left: 8rpx solid #d61e85;

            text:nth-child(2) {
              margin-left: 35rpx;
            }
          }
        }

        .content {
          .c-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20rpx;
            font-size: 29rpx;
            color: #333;
          }

          text:nth-child(2) {
            color: #d61e85;
          }
        }
      }
    }
  }
}
</style>
